<template>
	<view>
		<view class="nav">
			<uni-icons class="icon" type="back" size="30" @click="back"></uni-icons>
			<view class="nav-title">
				<text>TA的主页</text>
			</view>
		</view>
		<!-- 头像 昵称 -->
		<view class="top">
			<view class="left">
				<view class="img">
					<img src="" alt="">
				</view>
				<view class="">
					<view class="text">
						昵称
					</view>
					<view class="">
						简介...
					</view>
				</view>
			</view>
		</view>
		<!-- 等级勋章 -->
		<view class="dengji-box">
			<view class="shang">
				<uni-icons type="vip-filled" size="26"></uni-icons>
				<view class="">
					等级勋章
				</view>
			</view>
			<view class="xia">
				<view class="">
					<view class="">
						199
					</view>
					<view class="">
						TA的粉丝
					</view>
				</view>
				<view class="">
					<view class="">
						2039
					</view>
					<view class="">
						TA的关注
					</view>
				</view>
				<view class="xia-view">
					<button class="xia-btn">+ 关注</button>
				</view>
			</view>
		</view>
		<!-- 标签 -->
		<view class="biaoqian-box">
			<view class="">
				TA的标签
			</view>
			<view class="biaoqian-xia">
				<view class="biaoqian-yuan">
					
				</view>
				<view class="biaoqian-yuan">
					
				</view>
			</view>
		</view>
		<!-- 帖子 -->
		<view class="tiezi">
			帖子289
		</view>
		<!-- 内容 -->
		<view class="bodyBox">
			<view class="interactBox" v-for="(item, index) in 5" :key="index">
				<view class="userBox">
					<img src="../../static/home/touxiang.png" class="userHead">
					<view class="userName">
						<text style="width: 100%;">昵称</text>
						<text style="color: #999999;">简介...</text>
					</view>
				</view>
				<view class="interactInfoBox" @click="onClick">
					<text>文章内容</text>
				</view>
				<view class="interactImgBox">
					<view class="imgBox">
						<view class="" v-for="(item1, index1) in 6" :key="index1">
							<img src="../../static/home/info.jpg" class="interactImg" @click="onClick">
						</view>
					</view>
				</view>
				<view class="toolBox">
					<view class="tool">
						<img src="../../static/interact/fenxiang.png" class="toolIcon">
						<text>99+</text>
					</view>
					<view class="tool" @click="onClick">
						<img src="../../static/interact/pinglun.png" class="toolIcon">
						<text>99+</text>
					</view>
					<view class="tool" @click="good=!good">
						<img src="../../static/interact/dianzan.png" class="toolIcon" v-show="!good">
						<img src="../../static/interact/dianzan1.png" class="toolIcon" v-show="good">
						<text>99+</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0, // 选中id
				good: false, // 点赞状态
			};
		},
		methods: {
			// 跳转到文章内容
			onClick() {
				uni.navigateTo({
					url:'/pages/interact/articleContent/articleContent'
				})
			},
			back() {
				uni.navigateBack(1)
			}
		}
	}
</script>

<style lang="scss">
	.nav{
		margin-top: 40rpx;
		font-size: 36rpx;
		display: flex;
	}
	.nav-title{
		margin-left: 240rpx;
	}
.top {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 20rpx 40rpx 100rpx 46rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #ccc;
		.left {
			display: flex;

			.img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 100%;

				img {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			.text {
				margin-bottom: 20rpx;
			}
		}

		.right {
				padding-top: 20rpx;
			button {
				width: 150rpx;
				line-height: 60rpx;
				border: 1rpx solid #ccc;
				font-size: 24rpx;
			}
		}
}
	.dengji-box {
		width: 88%;
		margin: 0 auto;
		border: 1rpx solid #ccc;
		// border-radius: 3%;
		margin-top: -100rpx;
		background-color: #fff;
		padding: 30rpx 0 100rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-bottom: 30rpx;
		.shang {
			display: flex;
			margin-bottom: 30rpx;
			.uniui-vip-filled[data-v-a2e81f6e]:before {
				margin-right: 20rpx;
			}
		}
		.xia {
			display: flex;
			view {
				margin-right: 50rpx;
				text-align: center;
			}
			.xia-view {
				width: 200rpx;
				margin-right: 0;
				margin-right: -10rpx;
				.xia-btn {
					border: 1rpx solid #ccc;
					border-right: 0;
					border-radius: 80rpx 0 0 80rpx;
					font-size: 26rpx;
					background-color: #fff;
				}
			}
			
		}
    }
	.biaoqian-box {
		width: 88%;
		margin: 0 auto;
		border: 1rpx solid #ccc;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		.biaoqian-xia {
			display: flex;
			.biaoqian-yuan {
				width: 150rpx;
				height: 60rpx;
				border: 1rpx solid #ccc;
				border-radius: 30rpx;
				margin-top: 30rpx;
				margin-right: 20rpx;
			}
		}
		
	}
	.tiezi {
		padding-left: 46rpx;
		margin-top: 40rpx;
	}
	.bgBox {
		width: 100vw;
		padding: 30rpx;
		padding-bottom: 10rpx;
		background-color: #FAFAFA;
		position: sticky;
		top: 11.2vh;
		z-index: 9;
	}
	
	.changeBox {
		padding: 0 5rpx;
		padding-top: 30rpx;
		width: 680rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 8rpx 1rpx rgba(238,238,238,0.16);
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 10px;
	}
	
	.type {
		width: 70rpx;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.type1 {
		width: 70rpx;
		padding-bottom: 27rpx;
		color: #FF5F17;
		border-bottom: 5rpx solid #FF5F17;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.interactBox {
		width: 630rpx;
		background-color: #FFFFFF;
		border-radius: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 30rpx;
		margin: 10rpx 0rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #999999;
	}
	
	.userBox {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.userHead {
		width: 80rpx;
		height: 80rpx;
	}
	
	.userName {
		min-width: 300rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}
	
	.interactInfoBox {
		width: 650rpx;
		margin: 20rpx 0rpx;
	}
	
	.interactImgBox {
		width: 100%;
		height: 150rpx;
		overflow-y: hidden;
	}
	
	.imgBox {
		display: flex;
		height: 170rpx;
		overflow: auto;
	}
	
	.interactImg {
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
		border-radius: 10px;
	}
	
	.toolBox {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tool {
		display: flex;
		align-items: center;
	}
	
	.toolIcon {
		width: 50rpx;
		height: 50rpx;
		margin: 0rpx 10rpx;
	}
</style>
